<template>
    <!-- 利润表 -->
    <div class='profit w100 h100 df fd-c'>
        <tableHeader :time_scope_active="time_scope_active" @time_scope_click="time_scope_click"
            @report_click="report_click" :report_type_active="report_type_active" @report_type_click="report_type_click"
            @unit_click="unit_click" :disableButton="disableButton"></tableHeader>
        <div class="content">
            <div class="df">
                <div v-for="(item, index) in alldata" :key="index">
                    <!-- <el-table :data="alldata[index]" border :style="{ height: alldata[0].length * 46.5 + 'px' }" -->
                    <el-table :data="alldata[index]" border :show-header="false">
                        <el-table-column prop="A" label="姓名" width="300" v-if="item[alldata[0].length - 1] == true"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <div class="df jc-sb">
                                    <span class="ov1">{{ scope.row.A }}</span>
                                    <span @click="showEcharts(scope.row.Clist, scope.row.A)" v-if="scope.row.Clist"><i
                                            class="el-icon-s-data" style="margin-left: 5px; "></i></span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="C" label="time" width="200">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>


        <el-dialog title="" :visible.sync="dialogVisible" width="50%">
            <echarts1 :chart1Data="chart1Data" :chartmonth="chartmonth" :arrA_title="arrA_title"></echarts1>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
import tableHeader from '../threeTableComponents/tableHeader.vue';
import { get_three_table } from '@/utils/threeTable_api'
import echarts1 from './echarts1.vue'
export default {
    name: '',
    components: {
        tableHeader,
        echarts1
    },
    data() {
        return {
            time_scope_active: 0,//头部 时间范围
            report_type_active: 0,//头部报表类型
            disableButton: [2], // 头部 按钮的禁用
            arrA_title: "",
            alldata: [],
            tabledata: [],
            dialogVisible: false,
            firstData: [],
            chart1Data: [], //图标的数据
            chartmonth: [],  //图标的月份
            monthTable: 3, //获取表格数量 的参数
            companyId: "1", // 获取表格id  参数
            type: 1,//获取表格类型  参数
            submodule: "" //  ''原始报表   'sp'销售百分比
        }
    },
    created() {
        this.get_month_table(this.companyId, this.monthTable, this.type, this.submodule)
    },
    mounted() { },
    methods: {
        report_click(name) {      //头部第一项
            console.log(name)
        },
        time_scope_click(index) { //头部第二项
            console.log(index)
            this.time_scope_active = index

            if (index == 0) {
                this.monthTable = 3
            } else if (index == 1) {
                this.monthTable = 6
            } else if (index == 2) {
                this.monthTable = 12
            } else if (index == 3) {
                this.monthTable = 36
            }
            this.get_month_table(this.companyId, this.monthTable, this.type, this.submodule)
        },

        report_type_click(index) {//头部第三项
            console.log(index)
            this.report_type_active = index
            if (index == 0) {
                this.submodule = ''
                this.get_month_table(this.companyId, this.monthTable, this.type)
            } else if (index == 1) {
                this.submodule = 'sp'
                this.get_month_table(this.companyId, this.monthTable, this.type, this.submodule)
            } else if (index == 3) {
                this.submodule = 'yty'
                this.get_month_table(this.companyId, this.monthTable, this.type, this.submodule)
            }
        },
        unit_click(name) {       //头部第四项
            console.log(name)
        },

        showEcharts(arr, arrA) {
            console.log(arr)
            console.log(arrA)
            this.arrA_title = arrA
            let a = []
            for (var i = 0; i < arr.length; i++) {
                a.push(Number(arr[i]))
            }
            console.log(a)
            this.chart1Data = a
            this.dialogVisible = true
        },
        get_month_table(id, month, type, submodule) {
            get_three_table({ companyId: id, monthNumber: month, type: type, submodule: submodule }, "post").then(res => {
                console.log(res.data.allData)
                res.data.allData[0].push(true)
                let aa = res.data.allData.map((item => {
                    console.log(item[0])
                    return item[0].C
                }))
                console.log(aa)
                let lastMonthYear = aa[1].split("-")[0]
                let lastMonthMonth = Number(aa[1].split("-")[1]) + 1

                let firstMonth = lastMonthYear + '-' + lastMonthMonth
                console.log(firstMonth)

                for (var i = 0; i < aa.length; i++) {
                    if (aa[i] == "本期金额") {
                        // aa[i] = this.time(new Date().getTime())
                        aa[i] = firstMonth
                    }
                }
                console.log(aa)
                this.chartmonth = aa  // 柱状图 下方的月份

                // let newalldata = [res.data.allData[0].unshift(true)]


                this.firstData = res.data.allData[0]
                this.alldata = res.data.allData
                console.log(this.alldata)

            })
        },


        time(time) { //  对时间进行格式化
            var dt = new Date(time)
            var y = dt.getFullYear();
            var m = dt.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            return `${y}-${m}`;
        }
    }
}

</script>
<style scoped lang='scss'>
.profit {
    .content {
        height: calc(100% - 40px);
        // border: 1px solid #000;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;

        // overflow:scroll;
        >div {
            height: 100%;
            overflow: scroll;

            td {
                border: 1px solid #ccc;
                padding: 10px 50px 10px 5px;
                text-align: left;
            }
        }


        ::v-deep .cell {
            display: -webkit-box;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
        }

        ::v-deep .el-table__row {
            width: 150px !important;
        }


    }
}

i {
    cursor: pointer;
}
</style>
